import React, { Component } from 'react'
import './Item.css'

export default class Item extends Component {
  state = {mouse: false}
  // 鼠标移入移出事件
  handleMouse = (flag)=>{
    return ()=>{
      this.setState({mouse: flag})
    }
  }
  // 选中复选框时修改done
  changeDone = (id)=>{
    return (event)=>{
      // done = event.target.checked
      this.props.changeDone(id,event.target.checked)
    }
  }
  // 删除task 
  handleDelete = (id)=>{
    return ()=>{
      if(window.confirm("确认删除吗？")){
        this.props.handleDelete(id)
      }
    }
  }

  render() {
    let {id,name,done} = this.props
    const {mouse} = this.state
    return (
      <div>
        <li style={{backgroundColor: mouse ? "#ddd":"white"}} onMouseEnter={this.handleMouse(true)} onMouseLeave={this.handleMouse(false)}>
          <input type="checkbox" checked={done} onChange={this.changeDone(id)}/>
          <span>{name}</span>
          <button className="btn btn-danger" onClick={this.handleDelete(id)} style={{display: mouse ? 'block':'none'}}>删除</button>
        </li>
      </div>
    )
  }
}
